<template>
  <div v-if="recordStore.serial_num && recordStore.records.length" class="grid justify-items-stretch text-gray-500 gap-4">
    <template v-for="record in recordStore.records">
      <!--    消息左    -->
      <div v-if="record.msg_from == 1" class="flex flex-row gap-2">
        <div class="w-10 h-10 rounded-full text-center leading-10 flex-shrink-0 ring-1 ring-gray-200">
          <BaseIcon pclass="h-5 w-5 text-gray-500 inline-block" name="DevicePhoneMobileIcon" />
        </div>
        <!-- 内容 -->
        <div class="grid place-items-start">
          <p class="text-xs text-gray-300">{{ dayjs.unix(record.create_at).format('YYYY-MM-DD HH:mm:ss') }}</p>
          <div class="bg-gray-100 leading-5 rounded-bl-lg rounded-r-lg py-2 px-3">
            {{ record.content }}
          </div>
        </div>
        <div class="w-10 flex-shrink-0"></div>
      </div>
      <!--    消息右    -->
      <div v-if="record.msg_from == 2" class="flex flex-row-reverse gap-2">
        <div class="w-10 h-10 rounded-full text-center leading-10 flex-shrink-0 ring-1 ring-gray-200">
          <BaseIcon pclass="h-5 w-5 text-gray-500 inline-block" name="CommandLineIcon" />
        </div>
        <!-- 内容 -->
        <div class="grid place-items-end gap-1">
          <p class="text-xs text-gray-300 text-right">{{ dayjs.unix(record.create_at).format('YYYY-MM-DD HH:mm:ss') }}</p>
          <div class="bg-gray-100 leading-5 rounded-br-lg rounded-l-lg py-2 px-3">
            {{ getAnswer(record.content) }}
          </div>
          <!-- 图片 -->
          <div v-if="getImages(record.content)" class="flex flex-row gap-2">
            <div
              v-for="image in getImages(record.content)"
              class="h-10 ring-1 ring-gray-300 rounded p-0.5 inline-block relative"
              @click="ShowImgCom.openModal(image)"
            >
              <img class="max-h-9" :src="image"/>
            </div>
          </div>
        </div>
        <div class="w-10 flex-shrink-0"></div>
      </div>
    </template>

    <BaseShowImg ref="ShowImgCom"/>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
// pinia
import { useRecordStore } from '@/stores/record'

const recordStore = useRecordStore()

const ShowImgCom = ref(null)

function getAnswer(content) {
  try {
    const _content = JSON.parse(content)
    return _content.answer
  } catch {
    return ''
  }
}

function getImages(content) {
  try {
    const _content = JSON.parse(content)
    return _content.images
  } catch {
    return null
  }
}

</script>
